<template>
	<view class="page-container" :style="{height:`${windowHeight}px`}">
		<navbar title="家庆福" color="#333333" bg-color="white"></navbar>
		<view class="login-wrap" :style="{height: `calc(100% - ${height}px)` }">
			<view class="login-bg-box" :style="{background: `url(${$img_path('/login/login-bg.png')})`}">
				<!-- logo -->
				<view class="login-logo">
					<!-- <image class="login-logo" :src="$img_path()" mode=""></image> -->
				</view>
				<!-- 底部按钮区域 -->
				<view class="login-bottom-btns">
					<!-- 按钮 -->
					<button v-if="isAgreement" class="login-button" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">
						微信授权登录
					</button>
					<button v-else class="login-button" @click="checkLogin">
						微信授权登录
					</button>
					<!-- 同意权限 -->
					<view class="login-agreement">
						<!-- 同意 -->
						<image v-if="isAgreement" class="login-agreement-icon"
							:src="$img_path('/login/agreement-1.png')" mode="" @click="isAgreementToggle"></image>
						<!-- 不同意 -->
						<image v-else class="login-agreement-icon" :src="$img_path('/login/agreement-2.png')" mode=""
							@click="isAgreementToggle">
						</image>
						<text>我已阅读并同意<text @click="openAgreementPopup('用户协议')">《用户使用协议》</text>和<text
								@click="openAgreementPopup('隐私协议')">《隐私政策》</text></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 登录协议弹窗 -->
		<uni-popup ref="loginAgreementPopup" background-color="#fff" @change="change">
			<view class="popup-content"><text class="text">popup 内容</text></view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		login
	} from '@/utils/api/userApi.js'
	import lazyImage from '@/components/lazy-image/lazy-image.vue'
	export default {
		components: {
			lazyImage
		},
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight,
				height: 0,
				isAgreement: false,
				initCode: ''
			}
		},
		onLoad(opshs) {
			this.initCode = opshs.invitCode || ''
			console.log(this.initCode, 'initCodeinitCodeinitCode');
			console.log("this.navBarHeight", this.navBarHeight)
			this.getHeight()
		},
		methods: {
			//计算导航栏总高度
			getHeight() {
				// #ifdef APP-PLUS || H5 || APP
				// 获取状态栏高度(电量时间通知等信息-单位px)
				let sysInfo = uni.getSystemInfoSync();
				this.statusBarHeight = sysInfo.statusBarHeight;
				this.height = this.statusBarHeight + this.navBarHeight;

				// #endif

				// 判断获取微信小程序胶囊API是否可用
				if (uni.canIUse('getMenuButtonBoundingClientRect')) {
					// 获取微信小程序胶囊布局位置信息
					// #ifndef H5 || APP-PLUS || APP
					let sysInfo = uni.getSystemInfoSync();
					let rect = uni.getMenuButtonBoundingClientRect()
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// (胶囊上部高度-状态栏高度)*2 + 胶囊高度 = 导航栏高度（不包含状态栏）
					//以此保证胶囊位于中间位置，多机型适配
					this.$nextTick(() => {
						this.navBarHeight = this.wxnavBarHeight == null ? (rect.top - sysInfo.statusBarHeight) *
							2 + rect.height : this.wxnavBarHeight;
						this.statusBarHeight = sysInfo.statusBarHeight;
						// 状态栏高度 + 导航栏高度 = 自定义导航栏高度总和
						this.height = sysInfo.statusBarHeight + this.navBarHeight;
					})
					// #endif
				}
			},

			// 切换
			isAgreementToggle() {
				this.isAgreement = !this.isAgreement
			},

			// 未同意点击登录
			checkLogin(data) {
				// console.log(data,'-')
				// login({account:'15515515516',password:'a123456'}).then(res=>{
				// 	console.log(res,'---')
				// 	uni.setStorageSync('token',res.data.userinfo.token)
				// })
				uni.showToast({
					title: "请同意协议",
					icon: "none"
				})
			},

			// 获取用户手机号
			async getPhoneNumber(e) {
				// const ret = await uni.getUserProfile({
				// 	desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				// })
				// console.log(ret, 'getUserinfogetUserinfogetUserinfo');
				// return
				try {
					const result = await uni.login({
						provider: 'weixin',
					})
					let {
						code,
						encryptedData,
						iv
					} = e.detail
					let login_code = result[1].code
					uni.showLoading({
						title: '登录中...'
					})
					login({
						code: login_code,
						encryptedData,
						iv,
						type: 0,
						invit_code: this.initCode
					}).then(res => {
						uni.setStorageSync('token', res.data.user.token)
						uni.hideLoading()
						uni.reLaunch({
							url: '/pages/index/index'
						})

					})
					// console.log(e,'---')
					// console.log('uni.login', result)
				} catch (e) {
					//TODO handle the exception
					console.error("获取手机号失败", e)
				}
			},
			async getUserinfo() {
				
			},
			// 打开协议弹窗
			openAgreementPopup(type) {
				console.log('打开协议弹窗', type)
				uni.navigateTo({
					url: "/pagesRegion/servicePersonnelReview/agreement?type=" + type,
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style scoped>
	.login-wrap {
		padding: 30rpx 20rpx;
	}

	.login-bg-box {
		height: 100%;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
		overflow: hidden;
		position: relative;
	}

	.login-logo {
		width: 200rpx;
		height: 200rpx;
		margin: 0 auto;
		margin-top: 254rpx;
	}

	.login-bottom-btns {
		position: absolute;
		bottom: 38rpx;
		width: 100%;
		padding: 0 22rpx;
	}

	.login-button {
		width: 636rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 80rpx;
		margin: 0 auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #E72A2A;
	}

	.login-agreement {
		margin-top: 124rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50rpx;
	}

	.login-agreement-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 6rpx;
	}
</style>